<template>
	<view class="content">
		<view class="content-1">
			<!-- <image :class="{'image-1':type == 'process','image-2':type != 'process'}" src="../../static/image/titlepic02.png" mode="widthFix"></image> -->
			<view class="content-1-1">
				申请材料
			</view>
		</view>
		<view class="content-2" v-if="type == 'answer'">
			<view class="item flex" v-for="(item,index) in info.content" :key="index">
				<view class="item-1">
					<i class="iconfont" :class="[item.icon]" :style="{'color':item.color}"></i>
				</view>
				<view class="item-2">
					<view class="item-2-1">
						{{item.name}}
					</view>
					<view class="item-2-2">
						{{item.des}}
					</view>
				</view>
			</view>
		</view>
		<view class="content-3" v-else>
			<view class="content-3-1">
				<view class="content-3-head">
					<view class="content-3-1-1"></view>
					<view class="content-3-1-2">
						个人名义申请
					</view>
				</view>
				<view class="flex content-3-2">
					<view class="item" v-for="(item,index) in info.content1" :key="index">
						<i class="iconfont" :class="[item.icon]" :style="{'color':item.color}"></i>
						<view class="item-1-2">
							{{item.name}}
						</view>
						<view class="item-1-3" v-if="item.des">
							{{item.des}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-3-1">
				<view class="content-3-head">
					<view class="content-3-1-1"></view>
					<view class="content-3-1-3">
						企/事业单位名义申请
					</view>
				</view>
				<view class="flex content-3-2">
					<view class="item" v-for="(item,index) in info.content2" :key="index">
						<i class="iconfont" :class="[item.icon]" :style="{'color':item.color}"></i>
						<view class="item-1-2">
							{{item.name}}
						</view>
						<view class="item-1-3" v-if="item.des">
							{{item.des}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			infos:{
				answer:{
					content:[
						{name:'基本材料',des:'个人身份证或企业营业执照复印件',icon:'icon-ziliao',color:'#ffca28'},
						{name:'技术材料',des:'提供专利驳回通知书、复审请求书、申请源文件及OA答复材料',icon:'icon-cailiao',color:'#59dfbb'},
						{name:'其他材料',des:'复审委托书',icon:'icon-weituo',color:'#6a79e7'}
					]
				},
				apply:{
					content1:[
						{name:'个人身份证',icon:'icon-geren',color:'#67aefe'},
						{name:'技术交底书',icon:'icon-jishujiaodi',color:'#59dfbb'},
						{name:'专利委托书',icon:'icon-weituo',des:'我方代为准备',color:'#ffa529'},
						{name:'专利申请合同',icon:'icon-hetong',des:'我方代为准备',color:'#6a79e7'}
					],
					content2:[
						{name:'营业执照',icon:'icon-yingyezhizhao',color:'#f6cb00'},
						{name:'技术交底书',icon:'icon-jishujiaodi',color:'#59dfbb'},
						{name:'专利委托书',icon:'icon-weituo',des:'我方代为准备',color:'#ffa529'},
						{name:'专利申请合同',icon:'icon-hetong',des:'我方代为准备',color:'#6a79e7'}
					]
				}
			},
			info:{}
		};
	},
	created() {
		this.info = this.infos[this.type]
	},
	props:['type']
}
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	padding: 32rpx 35rpx 0 20rpx;
	margin-top: 20rpx;
	.content-1 {
		position: relative;
		height: 32rpx;
		image {
			position: absolute;
			top: 18rpx;
			height:18rpx;
			width: 158rpx;
		}
	}
	.content-1-1 {
		position: absolute;
		font-size: 32rpx;
		color: $uni-color-middle;
		background-image: linear-gradient(90deg, 
		#f6e57f 0%, 
		#fd8261 100%);
	}
	.content-2 {
		margin-top: 38rpx;
		.item {
			margin-left: 56rpx;
			margin-bottom: 40rpx;
			.item-1 {
				i {
					font-size: 90rpx;
				}
			}
			
			
			.item-2 {
				margin-left: 30rpx;
				font-size: 22rpx;
				color: $uni-color-botton;
			}
			.item-2-1 {
				font-size: 26rpx;
				color: $uni-color-middle;
				margin-bottom: 10rpx;
			}
		}
	}
	.content-3 {
		margin-top: 38rpx;
		.content-3-1 {
			margin-bottom: 72rpx;
			.content-3-head {
				position: relative;
				margin: 40rpx 20rpx 30rpx 20rpx;
			}
			.content-3-1-1 {
				position: absolute;
				width: 100%;
				height: 1rpx;
				background-color: #ccc;
			}
			.content-3-1-2 {
				width: 200rpx;
				height: 26rpx;
				position: absolute;
				font-size: 26rpx;
				color: $uni-color-top;
				background-color: #fff;
				padding: 0 20rpx;
				top: 50%;
				right: 50%;
				transform: translate(50%,-68%);
			}
			.content-3-1-3 {
				width: 288rpx;
				height: 26rpx;
				position: absolute;
				font-size: 26rpx;
				color: $uni-color-top;
				background-color: #fff;
				padding: 0 20rpx;
				top: 50%;
				right: 50%;
				transform: translate(50%,-68%);
			}
		}
		.content-3-2 {
			padding-top: 30rpx;
		}
		.item {
			flex-wrap: wrap;
			width: 25%;
			text-align: center;
			i {
				font-size: 60rpx;
			}
			
			.item-1-2 {
				color: $uni-color-middle;
				font-size: 26rpx;
				margin-bottom: 17rpx;
			}
			
			.item-1-3 {
				color: $uni-color-botton;
				font-size: 22rpx;
			}
			// .item-2 {
			// 	color: $uni-color-botton;
			// 	margin-top: 22rpx;
			// }
		}
	}
}
</style>